<template>
<div>
  <router-link to="/search" tag='div'  class="sousuo"><input placeholder="请输入您要搜索的商家或者商品"><span></span></router-link>
  <Nav :class="fixed ? 'fixed' : ''"></Nav>
  <SellerListItem ></SellerListItem>
  <goTop></goTop>
</div>
</template>

<script>
import goTop from "../../components/goTop"
import Nav from "../../components/Top/navsorts"
import SellerListItem from "../../components/seller-list-item/seller-list-item";
import axios from "axios"
export default {
  data(){
    return{ 
      fixed:false
    }
  },
components:{
  SellerListItem,
  Nav,
  goTop
},
 mounted() {
    window.addEventListener(
      "scroll",
      (e) => {
        let top = document.documentElement.scrollTop;
        if (top >49) {
          // 吸顶
          this.fixed = true;
        } else {
          // 还原
          this.fixed = false;
        }
      },true
    );
  },
}

</script>

<style lang='scss' scoped>
.fixed {
  position: fixed;
  top: 0;
  // background: white;
  // opacity: 0.6;
}
  .sousuo{
    width: 100%;
    padding: 5px 10px;
    height: 40px;
    background:  #FFCD5D;
    input{
      width: 100%;
      position: relative;
      border: none;
      height: 30px;
      padding-left: 30px;
      box-sizing: border-box;
      border-radius: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-right: 30px;
      font-size: 14px;
      opacity: 1;}
      span{
        content: "";
      background: url();
      background-repeat: no-repeat;
      background-size: contain;
      width: 16px;
      height: 16px;
      margin: 0 5px 0 10px;
      position: absolute;
      left: 10px;
      top: 20px;
      transform: translateY(-50%);
      }
    }
  
</style>